import React, { Component } from 'react'
import Gesture from './index'
import ReactDOM from 'react-dom'
import './demo.scss'

export default class GestureDemo extends Component {
  constructor (props) {
    super(props)
    this.el = null
    this.downLeft = 0
  }
  componentDidMount () {
    this.el = ReactDOM.findDOMNode(this)
    this.ctn = this.el.querySelector('.gestureDemoCtn')
  }
  onMousedown (start) {
    this.downLeft = this.ctn.offsetLeft
    this.downTop = this.ctn.offsetTop
  }
  onMousemove (start, move, distan) {
    this.ctn.style.left = this.downLeft + distan.X + 'px'
    this.ctn.style.top = this.downTop + distan.Y + 'px'
  }
  onMouseup (end) {
    console.log(end)
  }
  render () {
    return(
      <div
      className="gestureDemoWrap">
      <Gesture
      onMousedown={this.onMousedown.bind(this)}
      onMousemove={this.onMousemove.bind(this)}
      onMouseup={this.onMouseup.bind(this)}>
        <div
        className="gestureDemoCtn">desture</div>
      </Gesture>
      </div>
    )
  }
}